<div class="customizer-container" fxLayout="column">
  <div class="m-t-10">{{'settings.header.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.header">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.brand' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.brand">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.navigation.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.navigation">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.layout.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.mode"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="boxed">{{'settings.layout.boxed' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="fullwidth">{{'settings.layout.fullwidth' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.navigation.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.navigation"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="left">{{'settings.navigation.left' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="right">{{'settings.navigation.right' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.navigation.none' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.header.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.header"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="below">{{'settings.header.below' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.header.none' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.footer.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.footer"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="below">{{'settings.footer.below' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.footer.none' | translate}}</mat-radio-button>
  </mat-radio-group>

</div>